﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Enoch Wang</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- start-smoth-scrolling -->
<link href="css/imagescroll.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
<!-- //end-smoth-scrolling -->	

</head>
<body>
<!--header start here-->
<div class="header">
   <div class="container">
		<div class="header-top">
		
			<div class="header-left">
			<h2>Enoch Wang<h2>
			</div>
		  	 <div class="top-navg">
	    	           <span class="menu"> <img src="images/icon.png" alt=""/></span>
	    	    <nav class="cl-effect-1">	
					<ul class="res">
					    <li><a class="scroll active" href="#home">Home</a></li> 
						<li><a class="scroll" href="#about">About</a></li> 
						<li><a class="scroll" href="#education">Education</a></li> 
						<li><a class="scroll" href="#blog">Blog</a></li>
						<li><a class="scroll" href="#portfolio">Portfolio</a></li> 						
					 </ul>
				 </nav>
				<!-- script-for-menu -->
					 <script>
					   $( "span.menu" ).click(function() {
						 $( "ul.res" ).slideToggle( 300, function() {
						 // Animation complete.
						  });
						 });
					</script>
		        <!-- /script-for-menu -->
		   </div>
	  </div>
				
			    <div class="index_focus">

	<a href="javascript:;" class="index_focus_pre" title="上一张">上一张</a>
	<a href="javascript:;" class="index_focus_next" title="下一张">下一张</a>
	
	<div class="sliders">
		<ul>
			<li>
				<a href="http://weibo.com/wangjwenoch/" target="_blank" class="pic">
					<div class="image_desc">
						<h3>用微博记录好心情</h3>
						<p class="text">欢迎关注我的微博@Enoch王建文</p>
					</div>
					<img class="pic" src="images/sliders_mood.jpg" width="960" height="450" alt="">
				</a>
			</li>
			<li>
				<a href="music/music.html" target="_blank" class="pic">
					<div class="image_desc">
						<h3>听见好时光</h3>
						<p class="text">音乐你的生活</p>
					</div>
					<img class="pic" src="images/sliders_music.JPG" width="960" height="450" alt="">
				</a>
			</li>
			<li>
				<a href="myGirl/myGirl.html" target="_blank" class="pic">
					<div class="image_desc">
						<h3>完美告白</h3>
						<p class="text">因为爱，所以爱</p>
					</div>
					<img class="pic" src="images/sliders_love.jpg" width="960" height="450" alt="">
				</a>
			</li>
			
		</ul>
	</div>
	
	<div class="slide_nav">
		<a href="javascript:;">●</a>
		<a href="javascript:;">●</a>
		<a href="javascript:;">●</a>		
	</div>
	
</div>
 
<script type="text/javascript">
$(document).ready(function(){

	$(".index_focus").hover(function(){
		$(this).find(".index_focus_pre,.index_focus_next").stop(true, true).fadeTo("show", 1)
	},function(){
		$(this).find(".index_focus_pre,.index_focus_next").fadeOut()
	});
	
	$(".index_focus").slide({
		titCell: ".slide_nav a ",
		mainCell: ".sliders ul",
		delayTime: 5,
		interTime: 3500,
		prevCell:".index_focus_pre",
		nextCell:".index_focus_next",
		effect: "fold",
		autoPlay: true,
		trigger: "click",
		startFun:function(i){
			$(".image_desc").eq(i).find("h3").css("display","block").fadeTo(1000,1);
			$(".image_desc").eq(i).find(".text").css("display","block").fadeTo(1000,1);
		}
	});

});
</script>
				
	  		    <div class="banner">
				<br>
	  			 <h1>Welcome to my homepage！</h1>
	  		    </div>
				
				
				
	  </div>
</div>

<div class="who" id="about">	
				<div class="who-main">
	  				<h3>Who I Am</h3>
	  				<img src="images/circles.png" alt="">
					<div class="introduce">
					<div class="introduce-text">
						<h3>Enoch Wang</h3>
						<h4>CHINA</h4>
						<p>My name is Enoch Wang,a junior stundet who majors in Software Engineering(SE) in International School of Software,Wuhan University.</p>
					</div>
					<div class="introduce-img"><img src="images/head.jpg" class="img-responsive" alt=""/></div>  		    
					</div>
	  							
				</div>
			
				<div class="skill">

					<h3>My Skills</h3>					
		
					<div class="circle">
						<div class="circle" id="circles-1"></div>
						<p>Photoshop</p>
					</div>
					<div class="circle">
						<div class="circle" id="circles-2"></div>
						<p>Illustrator</p>
					</div>
					<div class="circle">
						<div class="circle" id="circles-3"></div>
						<p>Photography</p>
					</div>
					<div class="circle">
						<div class="circle" id="circles-4"></div>
						<p>Html 5 / CSS 3</p>
					</div>
					<div class="circle">
						<div class="circle" id="circles-5"></div>
						<p>C4D</p>
					</div>
					<div class="circle">
						<div class="circle" id="circles-6"></div>
						<p>After Effect</p>
					</div>
					<div class="clearfix"> </div>
					<script type="text/javascript" src="js/circles.js"></script>
					         <script>
								var colors = [
										['#f6608a', '#ffffff'], ['#f6608a', '#ffffff'], ['#f6608a', '#ffffff'], ['#f6608a', '#ffffff'], ['#f6608a', '#ffffff'], ['#f6608a', '#ffffff']
									];
								for (var i = 1; i <= 7; i++) {
									var child = document.getElementById('circles-' + i),
										percentage = 30 + (i * 10);
										
									Circles.create({
										id:         child.id,
										percentage: percentage,
										radius:     80,
										width:      10,
										number:   	percentage / 1,
										text:       '%',
										colors:     colors[i - 1]
									});
								}
						
					</script>
		
	
				</div>
	
</div>

<div class="work" id="education">
   <div class="container">
	   <div class="work-main">
	   	   <div class="work-top">
				 <h3>Education</h3>
				 <p>I grew up in Lu'an,Anhui,and graduated from Shucheng High School in June,2013.Now I am currently attending college in Wuhan,Hubei. </p>
		      </div>
		      <div class="work-grids">
					<div class="col-md-4 work-gd1">		
					     <img src="images/school1.png" alt="" class="img-responsive">
	                </div>				
					<div class="col-md-4 work-gd1">		
					     <img src="images/school2.png" alt="" class="img-responsive">
	                </div>	
					<div class="col-md-4 work-gd1">		
					     <img src="images/school3.jpg" alt="" class="img-responsive">
	                </div>	
				<div class="clearfix"> </div>
		      </div>
	     </div>
    </div>
</div>

<!-- blog -->
		<div class="blog" id="blog">
			<div class="container">
				<!-- head-section -->
				<div class="blog-header">				  		 
					<h3>My Blog</h3>
					<img src="images/circles.png" alt=""/>
				</div>
				<!-- /head-section -->
				<!-- blog-articals -->
				<div class="blog-articals">
					<div class="blog-artical">
						<div class="blog-artical-pic">
							<a href="http://blog.sina.com.cn/s/blog_1416b11e50102v6nz.html" target="_blank"><img src="images/blog1.jpg" title="name" /></a>
						</div>
						<div class="blog-artical-info">
							<h3><a href="http://blog.sina.com.cn/s/blog_1416b11e50102v6nz.html" target="_blank">在桥一方</a></h3>
							<span>Enoch | <a href="#">13 comments</a></span>
							<p>夜深人静，万家灯火已熄。夜阑寒影灯花淡，梦难成，更无眠。移步月下高楼，凝目北望，前方战事还未休？金戈铁马，气吞万里如虎，顷刻化为泥土，一个个精魂在血泊中殒逝，只为了我的一声号令···</p>
							<a class="more-btn" href="http://blog.sina.com.cn/s/blog_1416b11e50102v6nz.html" target="_blank">See More</a>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="blog-artical">
						<div class="blog-artical-pic">
							<a href="http://blog.sina.com.cn/s/blog_1416b11e50102v6tb.html" target="_blank"><img src="images/blog2.jpg" title="name" /></a>
						</div>
						<div class="blog-artical-info">
							<h3><a href="http://blog.sina.com.cn/s/blog_1416b11e50102v6tb.html" target="_blank">不打扰，是我的温柔</a></h3>
							<span>Enoch | <a href="#">13 comments</a></span>
							<p>【只缘感君一回顾，使我思君朝与暮】一个冬日的黄昏，慕紫在花溪边散心，一不小心弄湿了衣服，也许是太冷了，慕紫不禁打了个喷嚏，他回头看见了全身的慕紫，他向她走来···</p>
							<a class="more-btn" href="http://blog.sina.com.cn/s/blog_1416b11e50102v6tb.html" target="_blank">See More</a>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="blog-artical">
						<div class="blog-artical-pic">
							<a href="http://blog.sina.com.cn/s/blog_1416b11e50102v6qj.html" target="_blank"><img src="images/blog3.jpg" title="name" /></a>
						</div>
						<div class="blog-artical-info">
							<h3><a href="http://blog.sina.com.cn/s/blog_1416b11e50102v6qj.html" target="_blank">写在高考前一天</a></h3>
							<span>Enoch | <a href="#">13 comments</a></span>
							<p>我还是那个我，可我再也不是那个挑灯夜读，奋笔疾书的少年，我再也不能触摸得到她（他）们当时的心境，我也再不能陪着她（他）们一起走了。可我依旧在此刻怀念她（他）们。···</p>
							<a class="more-btn" href="http://blog.sina.com.cn/s/blog_1416b11e50102v6qj.html" target="_blank">See More</a>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="blog-artical">
						<div class="blog-artical-pic">
							<a href="single.html" target="_blank"><img src="images/blog4.jpg" title="name" /></a>
						</div>
						<div class="blog-artical-info">
							<h3><a href="#" target="_blank">他结婚了，我做了一场梦</a></h3>
							<span>Enoch | <a href="#">13 comments</a></span>
							<p>我大概明白了执子之手 与偕老无关 想起一事儿 以前我跟他得瑟 给他说追我的人能挤满一屋子 他说可不是 追你的哪个不是三百斤的 随便两三个就能挤满一屋子 想起来还是会觉得好笑 那是我们都回不去的年 </p>
							<a class="more-btn" href="#" target="_blank">See More</a>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="blog-artical">
						<div class="blog-artical-pic">
							<a href="http://blog.sina.com.cn/s/blog_1416b11e50102vopm.html" target="_blank"><img src="images/blog5.jpg" title="name" /></a>
						</div>
						<div class="blog-artical-info">
							<h3><a href="http://blog.sina.com.cn/s/blog_1416b11e50102vopm.html" target="_blank">因为爱情</a></h3>
							<span>Enoch | <a href="#">13 comments</a></span>
							<p>执子之手，与子偕老，死生契阔，与子成说。爱情是人类感情中最美妙的一种体验，是成长经历中最基本的和最精彩的情节。因为爱情，不会轻易悲伤，所以一切都是幸福的模样。</p>
							<a class="more-btn" href="http://blog.sina.com.cn/s/blog_1416b11e50102vopm.html" target="_blank">See More</a>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="blog-artical">
						<div class="blog-artical-pic">
							<a href="http://blog.sina.com.cn/s/blog_1416b11e50102vjre.html" target="_blank"><img src="images/blog6.jpg" title="name" /></a>
						</div>
						<div class="blog-artical-info">
							<h3><a href="http://blog.sina.com.cn/s/blog_1416b11e50102vjre.html" target="_blank">好久不见，六月先生！</a></h3>
							<span>Enoch | <a href="#">13 comments</a></span>
							<p>打开日志列表，发现上一篇日志的发表时间是2014年6月6日，也就是去年的今天。时间总是溜得很快，一别两三年，匆匆又夏天。忽而今夏，听见蝉鸣。好久不见，六月先生！</p>
							<a class="more-btn" href="http://blog.sina.com.cn/s/blog_1416b11e50102vjre.html" target="_blank">See More</a>
							<div class="clearfix"> </div>
						</div>
					</div>
					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
				<!-- blog-articals -->
				<p class="more-articals text-center">Check Out My <a href="http://www.blog.sina.com.cn/whuwjw" target="_blank">Blog</a> And Subscribe To Get All The Updates</p>
			</div>
		</div>
		<!-- /blog -->

<!--gallery start here-->
<div class="gallery" id="portfolio">
	<div class="container">
		<div class="gallery-main">
			<div class="gallery-top">
			    <h3>My Portfolio</h3>
			    <img src="images/circles.png" alt=""/>
			</div>
			<div class="gallery-bottom">
					<div class="col-md-4 gallery-left">
						<a href="images/portfolio1.jpg" rel="title" class="mask">
							<img src="images/portfolio1.jpg" alt="" class="img-responsive zoom-img">
						</a>
					</div>
					<div class="col-md-4 gallery-left">
						<a href="images/portfolio2.jpg" rel="title" class="mask">
							<img src="images/portfolio2.jpg" alt="" class="img-responsive zoom-img">
						</a>
					</div>
					<div class="col-md-4 gallery-left">
						<a href="images/portfolio3.jpg" rel="title" class="mask">
							<img src="images/portfolio3.jpg" alt="" class="img-responsive zoom-img">
						</a>
					</div>
					<div class="col-md-4 gallery-left">
						<a href="images/portfolio4.jpg" rel="title" class="mask">
							<img src="images/portfolio4.jpg" alt="" class="img-responsive zoom-img">
						</a>
					</div>
					<div class="col-md-4 gallery-left">
						<a href="images/portfolio5.jpg" rel="title" class="mask">
							<img src="images/portfolio5.jpg" alt="" class="img-responsive zoom-img">
						</a>
					</div>
					<div class="col-md-4 gallery-left">
						<a href="images/portfolio6.jpg" rel="title" class="mask">
							<img src="images/portfolio6.jpg" alt="" class="img-responsive zoom-img">
						</a>
					</div>
					<div class="clearfix"> </div>
			  </div>
		 </div>
		 <!--
		 <div class="gallery-more">
		    <a href="gallery/index.html" target="_blank">More</a>
		 </div>
		 -->
	</div>
</div>
<!--gallery  end here-->
<!--light-box-files 
		<script src="js/jquery.chocolat.js"></script>
		<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8">	
		<script type="text/javascript" charset="utf-8">
		$(function() {
			$('.gallery-bottom a').Chocolat();
		});
		</script>
-->
<!--contact start here-->
<!--
<div class="contact" id="contact">
	<div class="container">
		<div class="contact-main">
			   <div class="contact-top">
			   	   <h3>Contact Me</h3>
			   	   <img src="images/circles.png" alt="">
			   </div>
			   <div class="contact-bottom">
			   	   <input type="text" value="Name" class="name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}">
			   	   <input type="text" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}">
			   	   <textarea onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message';}">Message</textarea>
			   	   <input type="submit" value="Send">
			   </div>
			<div class="clearfix"> </div>
		</div>
	</div>
</div>
-->
<!--contact end here-->

<!--copyrights start here-->
<div class="copy-rights">
	<div class="container">
		<div class="copy-right-main">
		<!--
			<ul>
				<li><span class="fa"> </span></li>
				<li><span class="tw"> </span></li>
				<li><span class="g"> </span></li>
				<li><span class="in"> </span></li>
				<li><span class="dri"> </span></li>
			</ul>
			-->
			 <p>© 2015 E.W All rights reserved <b>Enoch Wang</b></p>
			<div class="clearfix"> </div>
		</div>
		<script type="text/javascript">
			$(document).ready(function() {
				$().UItoTop({ easingType: 'easeOutQuart' });
			});
		</script>
		<a href="#" id="toTop" style="display: block;"><span id="toTopHover" style="opacity: 1;"></span></a>
	</div>
</div>
<!--copyright end here-->
</html>